<template>
	<div class="register panel">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>手机号</label>
					<input v-model="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input v-model='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>确认</label>
					<input v-model='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input v-model='code' type="tel" class="mui-input" placeholder="请输入验证码" maxlength="6">
					<button type="button" @tap="getCode" id="code" class="mui-btn mui-btn-primary" :class="{'mui-disabled':isSendMessage}">{{codeBtn}}</button>
				</div>
			</form>
			<div class="mui-content-padded">
				<button type="button" @tap="register" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
			</div>
			<div class="mui-content-padded">
				<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'register',
		data() {
			return {
				isAutoLogin: true,
				username: "",
				password: "",
				password_confirm: "",
				code: "",
				codeBtn: "验证码",
				isSendMessage: false
			}
		},
		methods: {
			register() {
				if(this.username == "") {
					alert("登录账号不能为空");
					return false;
				}
				if(this.password == "") {
					alert("登录密码不能为空");
					return false;
				}
				if(this.password.length < 6) {
					alert("登录密码长度不能低于6位");
					return false;
				}
				if(this.password != this.password_confirm) {
					alert("两次密码输入不一致");
					return false;
				}
				if(this.code == "") {
					alert("验证码不能为空");
					return false;
				}
				alert("注册");
			},
			getCode() {
				var t = 30,
					_this = this;
				var time = setInterval(function() {
					if(t == 1) {
						_this.isSendMessage = false;
						_this.codeBtn = "验证码";
						clearInterval(time);
					} else {
						t--;
						_this.isSendMessage = true;
						_this.codeBtn = t + "s";
					}
				}, 1000);
			}
		},
		created() {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.area {
		margin: 20px auto 0px auto;
	}
	
	.mui-input-group:first-child {
		margin-top: 20px;
	}
	
	.mui-input-group label {
		width: 22%;
	}
	
	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 78%;
	}
	
	.mui-checkbox input[type=checkbox],
	.mui-radio input[type=radio] {
		top: 6px;
	}
	
	.mui-content-padded {
		margin-top: 25px;
	}
	
	.mui-btn {
		padding: 10px;
	}
	
	#code {
		width: 70px;
		position: absolute;
		right: 5px;
		bottom: 2px;
	}
</style>